<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            margin: 100px auto;
        }
        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(/imge/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .wrong{
            display: inline-block;
            font-size: 12px;
            color: red;
            background: url(/imge/wrong.png) no-repeat left center;
            padding-left: 20px;
        }
        .right{
            display: inline-block;
            font-size: 12px;
            color: greenyellow;
            background: url(/imge/right.png) no-repeat left center;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <!-- 1.首先判断的事件是表单失去焦点onblur
    2.如果输入正确则提示正确的信息颜色为绿色的小图标变化
    3.如果输入错误，不是6到16位，则提示错误信息颜色位红色小图标变化
    4.因为里面变化样式比较多，则采用className修改样式 -->
       <div class="box">
            <input type="text" name="" class="ipt">
            <p class="message">输入6~16位密码</p>
       </div>
       <script>
           var input = document.querySelector('.ipt');
           var p = document.querySelector('.message');
           input.onblur = function(){
                if(input.value.length<6 || input>16){
                    console.log('错误');
                   p.className = 'wrong';
                   p.innerHTML = '输入的位数不对，要求6~16位';
                }
                else{
                    console.log('正确');
                   p.className = 'right';
                   p.innerHTML = '正确';
                }
           }
       </script>
</body>
</html>